<template>
  <div class="forum-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="page-title">论坛讨论</h1>
          <p class="page-subtitle">交流公考经验，分享学习心得</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" size="large" @click="navigateToCreatePost">
            <el-icon><Edit /></el-icon>
            发布帖子
          </el-button>
        </div>
      </div>
    </div>

    <!-- 论坛首页 -->
    <template v-if="contentMode === 'index'">
      <!-- 论坛分类 -->
      <div class="forum-categories">
        <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="all">
            <div class="posts-container">
              <PostCard
                v-for="post in paginatedPosts"
                :key="post.id"
                :post="post"
                :show-summary="true"
                :show-images="true"
                :show-actions="false"
                :is-collected="post.isCollected"
                class="mb-4"
                @collect="handleCollect"
                @uncollect="handleUncollect"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="公务员考试" name="xingce">
            <div class="posts-container">
              <PostCard
                v-for="post in paginatedPosts"
                :key="post.id"
                :post="post"
                :show-summary="true"
                :show-images="true"
                :show-actions="false"
                :is-collected="post.isCollected"
                class="mb-4"
                @collect="handleCollect"
                @uncollect="handleUncollect"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="事业单位考试" name="shenlun">
            <div class="posts-container">
              <PostCard
                v-for="post in paginatedPosts"
                :key="post.id"
                :post="post"
                :show-summary="true"
                :show-images="true"
                :show-actions="false"
                :is-collected="post.isCollected"
                class="mb-4"
                @collect="handleCollect"
                @uncollect="handleUncollect"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="教师招聘" name="mianshi">
            <div class="posts-container">
              <PostCard
                v-for="post in paginatedPosts"
                :key="post.id"
                :post="post"
                :show-summary="true"
                :show-images="true"
                :show-actions="false"
                :is-collected="post.isCollected"
                class="mb-4"
                @collect="handleCollect"
                @uncollect="handleUncollect"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="银行招聘" name="experience">
            <div class="posts-container">
              <PostCard
                v-for="post in paginatedPosts"
                :key="post.id"
                :post="post"
                :show-summary="true"
                :show-images="true"
                :show-actions="false"
                :is-collected="post.isCollected"
                class="mb-4"
                @collect="handleCollect"
                @uncollect="handleUncollect"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[7, 10, 20, 50]"
          layout="prev, pager, next"
          :total="totalPosts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>

    <!-- 热门话题 -->
    <template v-else-if="contentMode === 'hot'">
      <div class="section-title">
        <h2>热门话题</h2>
        <p>当前最受关注的公考讨论</p>
      </div>

      <!-- 热门话题筛选和排序 -->
      <div class="hot-topics-controls">
        <div class="filter-tabs">
          <el-tabs v-model="hotTopicsFilter" @tab-change="handleHotTopicsFilterChange">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="今日热门" name="today"></el-tab-pane>
            <el-tab-pane label="本周热门" name="week"></el-tab-pane>
            <el-tab-pane label="本月热门" name="month"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="sort-options">
          <el-select v-model="sortBy" placeholder="排序方式" @change="handleSortChange">
            <el-option label="热度排序" value="hot"></el-option>
            <el-option label="最新发布" value="latest"></el-option>
            <el-option label="最多回复" value="replies"></el-option>
            <el-option label="最多点赞" value="likes"></el-option>
          </el-select>
        </div>
      </div>

      <!-- 热门话题列表 -->
      <div class="hot-topics-section">
        <div
          v-for="(post, index) in paginatedHotPosts"
          :key="post.id"
          class="hot-topic-item"
          @click="navigateToPost(post)"
        >
          <div class="hot-topic-rank" :class="getRankClass(index)">
            {{ getGlobalRank(index) }}
          </div>
          <div class="hot-topic-content">
            <h3 class="hot-topic-title">{{ post.title }}</h3>
            <div class="hot-topic-meta">
              <div class="meta-left">
                <span>{{ post.username }}</span>
                <span>{{ formatTime(post.createdAt) }}</span>
                <span>{{ post.categoryName || '未分类' }}</span>
              </div>
              <div class="hot-topic-stats">
                <span class="stat-item">
                  <el-icon><View /></el-icon>
                  {{ post.viewCount || 0 }}
                </span>
                <span class="stat-item">
                  <el-icon><Star /></el-icon>
                  {{ post.likeCount || 0 }}
                </span>
                <span class="stat-item">
                  <el-icon><ChatDotRound /></el-icon>
                  {{ post.commentCount || 0 }}
                </span>
              </div>
            </div>
          </div>
          <div class="hot-topic-actions">
            <el-button size="small" type="primary" @click.stop="navigateToPost(post)">
              查看详情
            </el-button>
            <el-button size="small" @click.stop="toggleLike(post)">
              <el-icon><Star /></el-icon>
              {{ post.isLiked ? '已赞' : '点赞' }}
            </el-button>
            <el-button size="small" @click.stop="togglePostFollow(post)">
              <el-icon><Plus /></el-icon>
              {{ post.isFollowed ? '已关注' : '关注' }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="hotTopicsCurrentPage"
          v-model:page-size="hotTopicsPageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, prev, pager, next, jumper"
          :total="hotTopicsTotal"
          @size-change="handleHotTopicsSizeChange"
          @current-change="handleHotTopicsCurrentChange"
        />
      </div>
    </template>

    <!-- 论坛分类视图 -->
    <template v-else-if="contentMode === 'categories'">
      <div class="section-title">
        <h2>论坛分类</h2>
        <p>选择感兴趣的分类浏览相关内容</p>
      </div>

      <div class="categories-grid">
        <el-card v-for="category in categories" :key="category.id" class="category-card" @click="navigateToCategory(category)">
          <div class="category-header">
            <div class="category-icon" :style="{ backgroundColor: getCategoryColor(category.id) }">
              {{ getCategoryIcon(category.id) }}
            </div>
            <div class="category-info">
              <h3>{{ category.name }}</h3>
              <p>{{ category.description || '暂无描述' }}</p>
            </div>
          </div>
          <div class="category-stats">
            <span>{{ category.postCount || 0 }} 个帖子</span>
            <span>{{ category.postCount || 0 }} 个讨论</span>
          </div>
        </el-card>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onActivated, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Edit, View, Star, ChatDotRound, Plus } from '@element-plus/icons-vue'
import PostCard from '@/components/PostCard.vue'
import { getPosts, getCategories, likePost } from '@/api/forum'
import type { Post, Category } from '@/types/forum'

// 路由
const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const contentMode = ref<'index' | 'hot' | 'categories'>('index')
const activeTab = ref('all')

// 分页数据
const currentPage = ref(1)
const pageSize = ref(7)
const totalPosts = ref(0)

// 帖子数据
const posts = ref<Post[]>([])
const categories = ref<Category[]>([])
const hotPosts = ref<Post[]>([])

// 注意：已移除所有模拟数据，只使用后端API数据

// 筛选数据
const searchKeyword = ref('')
const sortBy = ref('latest')
const categoryFilter = ref<number | null>(null)

// 热门话题相关数据
const hotTopicsFilter = ref('all')
const hotTopicsCurrentPage = ref(1)
const hotTopicsPageSize = ref(10)
const hotTopicsTotal = ref(0)

// 计算属性已移除，现在直接使用 posts.value

// 直接使用从后端获取的帖子数据，不需要前端分页
const paginatedPosts = computed(() => {
  return posts.value
})

// 更新总帖子数（基于筛选后的数据）
// 注意：此函数已被注释掉，因为会覆盖从API获取的真实总数
// const updateTotalPosts = () => {
//   totalPosts.value = filteredPosts.value.length
// }

// 热门话题筛选后的数据
const filteredHotPosts = computed(() => {
  let filtered = [...hotPosts.value]

  // 根据时间筛选
  const now = new Date()
  switch (hotTopicsFilter.value) {
    case 'today':
      filtered = filtered.filter(post => {
        const postDate = new Date(post.createdAt)
        return postDate.toDateString() === now.toDateString()
      })
      break
    case 'week':
      filtered = filtered.filter(post => {
        const postDate = new Date(post.createdAt)
        const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
        return postDate >= weekAgo
      })
      break
    case 'month':
      filtered = filtered.filter(post => {
        const postDate = new Date(post.createdAt)
        const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
        return postDate >= monthAgo
      })
      break
  }

  // 排序
  switch (sortBy.value) {
    case 'latest':
      filtered.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      break
    case 'popular':
      filtered.sort((a, b) => b.viewCount - a.viewCount)
      break
    case 'hot':
      // 热门排序：点赞数 + 评论数 + 收藏数 + 浏览数（权重递减）
      filtered.sort((a, b) => {
        const scoreA = (a.likeCount || 0) * 3 + (a.commentCount || 0) * 2 + (a.viewCount || 0) * 0.1
        const scoreB = (b.likeCount || 0) * 3 + (b.commentCount || 0) * 2 + (b.viewCount || 0) * 0.1
        return scoreB - scoreA
      })
      break
  }

  return filtered
})

// 热门话题分页后的数据
const paginatedHotPosts = computed(() => {
  const start = (hotTopicsCurrentPage.value - 1) * hotTopicsPageSize.value
  const end = start + hotTopicsPageSize.value
  return filteredHotPosts.value.slice(start, end)
})

// 更新热门话题总数
const updateHotTopicsTotal = () => {
  hotTopicsTotal.value = filteredHotPosts.value.length
}

// 方法
const loadPosts = async () => {
  try {
    loading.value = true
    console.log('加载帖子数据...', { page: currentPage.value, pageSize: pageSize.value })

    const requestParams = {
      page: currentPage.value - 1, // 后端使用0-based索引
      pageSize: pageSize.value, // 使用每页大小进行后端分页
      categoryId: categoryFilter.value || undefined,
      keyword: searchKeyword.value || undefined,
      sortBy: sortBy.value as any
    }
    console.log('API请求参数:', requestParams)

    const response = await getPosts(requestParams)

    console.log('API响应:', response)
    console.log('API响应类型:', typeof response)
    console.log('API响应内容:', JSON.stringify(response, null, 2))

    if (response && response.content) {
      // Spring Boot Page 对象格式
      console.log('使用Spring Boot Page格式数据')
      posts.value = response.content || []
      totalPosts.value = response.totalElements || 0
      console.log('设置Spring Boot数据:', { 
        posts: posts.value.length, 
        total: totalPosts.value,
        currentPage: (response.number ?? 0) + 1,
        totalPages: response.totalPages,
        isFirst: response.first,
        isLast: response.last
      })
    } else if (response && response.data) {
      // 自定义分页格式
      console.log('使用自定义分页格式数据')
      posts.value = response.data || []
      totalPosts.value = response.total || 0
      console.log('设置自定义数据:', { posts: posts.value.length, total: totalPosts.value })
    } else {
      // API返回空数据
      console.log('API返回空数据')
      posts.value = []
      totalPosts.value = 0
      console.log('设置空数据:', { posts: posts.value.length, total: totalPosts.value })
    }

    // 注意：不要在这里调用updateTotalPosts()，因为会覆盖从API获取的真实总数
    // updateTotalPosts()

    console.log('加载完成:', { posts: posts.value.length, total: totalPosts.value })

  } catch (error) {
    console.error('加载帖子失败:', error)
    console.log('API调用失败，显示空数据')

    // API调用失败时显示空数据
    posts.value = []
    totalPosts.value = 0
    console.log('设置空数据:', { posts: posts.value.length, total: totalPosts.value })
  } finally {
    loading.value = false
  }
}

const loadCategories = async () => {
  try {
    const response = await getCategories()
    categories.value = response
  } catch (error) {
    console.error('加载分类失败:', error)
  }
}

const loadHotPosts = async () => {
  try {
    // 获取所有帖子，然后在前端进行热门排序
    const response = await getPosts({ pageSize: 1000 })
    const allPosts = response.content || response.data || []
    
    // 按热门度排序：点赞数*3 + 评论数*2 + 浏览数*0.1
    hotPosts.value = allPosts.sort((a, b) => {
      const scoreA = (a.likeCount || 0) * 3 + (a.commentCount || 0) * 2 + (a.viewCount || 0) * 0.1
      const scoreB = (b.likeCount || 0) * 3 + (b.commentCount || 0) * 2 + (b.viewCount || 0) * 0.1
      return scoreB - scoreA
    })
    
    // 更新热门话题总数
    updateHotTopicsTotal()
  } catch (error) {
    console.error('加载热门帖子失败:', error)
  }
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  // 重新加载数据，使用后端分页
  loadPosts()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据，使用后端分页
  loadPosts()
}

const handleHotTopicsSizeChange = (val: number) => {
  hotTopicsPageSize.value = val
  hotTopicsCurrentPage.value = 1
}

const handleHotTopicsCurrentChange = (val: number) => {
  hotTopicsCurrentPage.value = val
}

// 搜索和筛选功能暂未实现，相关函数已移除

// handleSortChange 函数在下面定义

// handleTabClick 函数在下面定义

const handleHotTopicsFilterChange = () => {
  hotTopicsCurrentPage.value = 1
  // 更新热门话题总数
  updateHotTopicsTotal()
}

const handleSortChange = () => {
  currentPage.value = 1
  if (contentMode.value === 'hot') {
    // 如果是热门话题页面，更新热门话题总数
    updateHotTopicsTotal()
  } else {
    // 如果是普通论坛页面，重新加载帖子
    loadPosts()
  }
}


const navigateToPost = (post: Post) => {
  router.push(`/forum/post/${post.id}`)
}

const navigateToCreatePost = () => {
  router.push('/forum/create')
}

const toggleLike = async (post: Post) => {
  try {
    if (post.isLiked) {
      // 暂时使用likePost API，实际项目中应该有unlikePost API
      await likePost(post.id)
      post.likeCount--
      post.isLiked = false
      ElMessage.success('取消点赞成功')
    } else {
      await likePost(post.id)
      post.likeCount++
      post.isLiked = true
      ElMessage.success('点赞成功')
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    ElMessage.error('操作失败')
  }
}

const togglePostFollow = async (post: Post) => {
  try {
    if (post.isFollowed) {
      post.isFollowed = false
      ElMessage.success('取消关注成功')
    } else {
      post.isFollowed = true
      ElMessage.success('关注成功')
    }
  } catch (error) {
    console.error('关注操作失败:', error)
    ElMessage.error('操作失败')
  }
}

const handleCollect = async (post: Post) => {
  try {
    console.log('收藏帖子:', post.id)

    const collectionKey = 'userCollections'
    const existingCollections = JSON.parse(localStorage.getItem(collectionKey) || '[]')

    const newCollection = {
      contentType: 'FORUM',
      contentId: Number(post.id),
      title: post.title,
      createdAt: new Date().toISOString()
    }

    existingCollections.push(newCollection)
    localStorage.setItem(collectionKey, JSON.stringify(existingCollections))
    console.log('已保存到本地存储')

    post.isCollected = true
    ElMessage.success('收藏成功')
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error('收藏失败')
  }
}

const handleUncollect = async (post: Post) => {
  try {
    console.log('取消收藏帖子:', post.id)

    const collectionKey = 'userCollections'
    const existingCollections = JSON.parse(localStorage.getItem(collectionKey) || '[]')

    const filteredCollections = existingCollections.filter((item: any) =>
      !(item.contentType === 'FORUM' && item.contentId === Number(post.id))
    )

    localStorage.setItem(collectionKey, JSON.stringify(filteredCollections))
    console.log('已从本地存储中删除收藏')

    post.isCollected = false
    ElMessage.success('取消收藏成功')
  } catch (error) {
    console.error('取消收藏操作失败:', error)
    ElMessage.error('取消收藏失败')
  }
}

// 监听筛选条件变化
watch([searchKeyword, sortBy, categoryFilter], () => {
  currentPage.value = 1
  // 注意：不要调用updateTotalPosts()，因为会覆盖从API获取的真实总数
  // updateTotalPosts() // 更新总帖子数
  loadPosts()
}, { deep: true })

// 监听筛选后的数据变化，更新总帖子数
// 注意：不要调用updateTotalPosts()，因为会覆盖从API获取的真实总数
// watch(filteredPosts, () => {
//   updateTotalPosts()
// }, { deep: true })

// 监听热门话题筛选后的数据变化，更新热门话题总数
watch(filteredHotPosts, () => {
  updateHotTopicsTotal()
}, { deep: true })

// 根据路由设置内容模式
const setContentMode = () => {
  if (route.path === '/forum/hot') {
    contentMode.value = 'hot'
  } else if (route.path === '/forum/categories') {
    contentMode.value = 'categories'
  } else {
    contentMode.value = 'index'
  }
}

// 监听路由变化
watch(() => route.path, () => {
  setContentMode()
})

onMounted(() => {
  console.log('ForumView mounted')
  setContentMode()
  loadPosts()
  loadCategories()
  loadHotPosts()
  updateContentMode()
})

// 页面激活时刷新数据（从其他页面返回时）
onActivated(() => {
  console.log('ForumView activated, refreshing data')
  loadPosts()
  loadHotPosts()
})

// 根据当前路由更新内容模式
const updateContentMode = () => {
  if (route.path === '/forum/hot') {
    contentMode.value = 'hot'
  } else if (route.path === '/forum/categories') {
    contentMode.value = 'categories'
  } else {
    contentMode.value = 'index'
  }
}

// 工具函数
const handleTabClick = (tab: any) => {
  console.log('切换分类:', tab.props.name)
  activeTab.value = tab.props.name

  // 根据标签页名称设置分类ID
  const categoryMap: { [key: string]: number | null } = {
    'all': null,
    'xingce': 1,
    'shenlun': 2,
    'mianshi': 3,
    'experience': 4
  }

  categoryFilter.value = categoryMap[tab.props.name] || null
  currentPage.value = 1
  loadPosts()
}

const navigateToCategory = (category: Category) => {
  router.push(`/forum/category/${category.id}`)
}

const getGlobalRank = (index: number) => {
  // 计算全局排名：当前页偏移量 + 当前项索引 + 1
  const offset = (hotTopicsCurrentPage.value - 1) * hotTopicsPageSize.value
  return offset + index + 1
}

const getRankClass = (index: number) => {
  const globalRank = getGlobalRank(index)
  if (globalRank <= 3) return 'rank-top'
  if (globalRank <= 10) return 'rank-high'
  return 'rank-normal'
}

const getCategoryColor = (categoryId: number) => {
  const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
  return colors[categoryId % colors.length]
}

const getCategoryIcon = (categoryId: number) => {
  const icons = ['📚', '✍️', '💼', '🎯', '💡']
  return icons[categoryId % icons.length]
}

const formatTime = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString()
  }
}
</script>

<style scoped>
.forum-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.title-section h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.title-section p {
  font-size: 1.1rem;
  color: #6b7280;
  margin: 0;
}

.header-actions .el-button {
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
}

.forum-categories {
  margin-bottom: 30px;
}

.posts-container {
  min-height: 400px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.hot-topics-section {
  margin-bottom: 30px;
}

.hot-topic-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hot-topic-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.hot-topic-rank {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
  margin-right: 16px;
}

.rank-top {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.rank-high {
  background: linear-gradient(135deg, #4ecdc4, #6dd5ed);
}

.rank-normal {
  background: linear-gradient(135deg, #95a5a6, #bdc3c7);
}

.hot-topic-content {
  flex: 1;
  min-width: 0;
}

.hot-topic-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.hot-topic-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9rem;
  color: #6b7280;
}

.hot-topic-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.category-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.category-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
}

.category-info h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f2937;
}

.category-stats {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: #6b7280;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .title-section h1 {
    font-size: 2rem;
  }

  .hot-topic-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hot-topic-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hot-topic-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .meta-left {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hot-topic-actions {
    margin-left: 0;
  }
}
</style>